<template>
  <div id="login">
      <div class="login"  >
           <i class="iconfont icon-wangyiyunyinle"></i>
          <div class="left">
              <span>手机号：</span>
              <input type="text" v-model="isRun">
          </div>
          <div class="right">
              <span>密码：</span><input type="password" v-model="isRun2">
          </div>
      </div>
      <div class="but">
          <template>
          <a-button @click="success" >登录</a-button>
          </template>
       <button @click="abuo" >注册</button>
       <button @click="cc"> 游客登录</button>
      </div>
      <!-- <img class="ab" :src="icom"  alt="" >
      <button v-show="isou" @click="rut" class="ub">我已扫码登录</button> -->
  </div>
</template>

<script>
import {message} from 'ant-design-vue';
export default {
   data:()=>{
       return{
           isRun:'',
           isRun2:'',
           list:[],
           icom:null,
           unikey:null,
           run:'',
           isou:false,
           obj: {
            name: '曾磊'
           }
       }
   },
  methods:{
     async success(){
          let deng = await this._axios.get(`/login/cellphone?phone=${this.isRun}&password=${this.isRun2}`);
          console.log(deng.data.code);
          this.list = deng
          localStorage.setItem('bb',JSON.stringify(this.list))
          if(this.list.data.code===200){
            this.$router.push('/recommend')
             let aa =(JSON.parse(sessionStorage.getItem('x-token')));
          console.log(aa.data);
          message.success("你好："+aa.data.profile.nickname,1)
          }else if(this.list.data.code===400){
            //   alert('账号输入不正确')
            message.error('账号输入不正确',1)
          }else if(this.list.data.code===502){
            message.error('密码输入不正确',1)
          }
      },
      abuo(){
          this.$router.push({path:'/rou'})
      },
    //   bb(){
    //       this.isou=true
    //        this._axios.get(`/login/qr/key`).then((res)=>{
    //       this.unikey = res.data.data.unikey
    //       console.log(this.unikey);
    //       this._axios.get(`/login/qr/create?key=${this.unikey}&qrimg=${this.unikey}`).then((res)=>{
    //       this.icom = res.data.data.qrimg
    //   })
    //   })
           
       
    //   },
    cc(){
        this.$router.push({path:'/recommend'})
    },
      rut(){
            this._axios.get(`/login/qr/check?key=${this.unikey}`).then((res)=>{
            console.log(res);
          })
        
      }
  },
  mounted(){
      // var imgFile = this.base64ImgtoFile(base64Img); 
    //   let imgFile =this.base64ImgtoFile('…WusjDWhd5WOsiD2td5H+nUO6Qoid4WgAAAABJRU5ErkJggg==')
    //   console.log(imgFile);
      
  },
  watch:{
    tt(){
         this._axios.get(`/login/qr/check?key=${this.unikey}`).then((res)=>{
             console.log(res);
            
          })
    }
  },
  
// // base64编码的图片
//  base64Img = '...';
// //转换图片文件
// var imgFile = this.base64ImgtoFile(base64Img); 
}
</script>

<style lang='scss' scopen>
   #login{
       height: 100%;
       background-color: #d43c33;
       text-align: center;
       .login{
           
           
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           align-items: center;
           i{
               margin-top: _vw(300);
               display: block;
               font-size: _vw(70);
               color: #fff;
           }
           .left{
               margin-top: _vw(60);
               text-align: center;
               width: _vw(550);
               height: _vw(100);
               background-color: #fff;
               border-radius: _vw(40);
               line-height: _vw(100);
               span{
                   display: inline-block;
               }
               input{
                   width: _vw(400);
                   height: _vw(70);
                   border: none;
                   outline: none;
               }
           }
           .right{
               margin-top: _vw(60);
               text-align: center;
               width: _vw(550);
               height: _vw(100);
               background-color: #fff;
               border-radius: _vw(40);
               line-height: _vw(100);
                span{
                   display: inline-block;
               }
               input{
                   width: _vw(400);
                   height: _vw(70);
                   border: none;
                   outline: none;
               }
           }
       }
       .but{
           margin-top: _vw(80);
           display: flex;
           justify-content: center;
           button{
              width: _vw(200);
              height: _vw(80);
              background-color: #fff; 
              border: 1px solid #fff;
              margin: _vw(20);
              font-size: _vw(28);
              border-radius: _vw(40) ;
           }
         
       }
       img{
           margin-top: _vw(20);
               width: _vw(200);
           }
           .ub{
               display: block;
                width: _vw(200);
              height: _vw(80);
              background-color: #fff; 
              border: 1px solid #fff;
              margin: _vw(20);
              font-size: _vw(28);
              border-radius: _vw(40) ;
              margin: _vw(20) auto;
           }
   }
     
</style>